<template>
  <el-drawer
    :visible="drawerVisible"
    @close="cancel"
    v-loading="loading"
    size="1000px"
    style="z-index: 2012"
    append-to-body
    :wrapperClosable="false"
  >
    <template v-if="detail">
      <div
        slot="title"
        style="font-size: 28px; font-weight: bold; color: #1a1a1a"
      >
        出库单
      </div>
      <div class="order-list" style="padding: 20px">
        <div class="order-item" v-for="(item, index) in detail">
          <el-descriptions :column="1">
            <el-descriptions-item label="门店名称">{{
              shopListMap[item.shopId] ? shopListMap[item.shopId].shopName : "-"
            }}</el-descriptions-item>
            <el-descriptions-item label="订单号">{{
              item.orderNo
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{
              item.customPhone
            }}</el-descriptions-item>
            <el-descriptions-item label="渠道">{{
              orderComeFromMap[item.comeFrom]
            }}</el-descriptions-item>
            <el-descriptions-item label="商品信息"
              ><div>
                <div v-for="item in item.orderGoodPoList">
                  {{ item.name }}[{{
                    item.price
                  }}][{{ item.buyNum }}份]
                </div>
              </div></el-descriptions-item
            >
            <el-descriptions-item label="鞋子数量"
              >{{ item.shoeNum }} 双</el-descriptions-item
            >

            <el-descriptions-item label="客户备注" ><span style="color: red;font-size: 22px;line-height: 22px;height: 22px; margin-top: -5px;">{{
              item.customerRemark || "-"
            }}</span></el-descriptions-item>
            <el-descriptions-item label="商家备注">
              <span style="color: red;font-size: 22px;line-height: 22px;height: 22px;margin-top: -5px;">{{
              item.shopRemark || "-"
            }}</span>
            </el-descriptions-item>

            <el-descriptions-item
              label="鞋子信息"
              v-if="item.shoePoList && item.shoePoList.length"
              labelClassName="hide-label"
            >
            <TableTongji style="flex: 1" :orderId="detail[index].id" :tableData="detail[index].shoePoList" :orderDetail="detail[index]" :scene="'detail'"></TableTongji>
            
            </el-descriptions-item>

      
            <el-descriptions-item label="入库时间">{{
              item.checkInTime
            }}</el-descriptions-item>

           <el-descriptions-item label="收件地址"  v-if="item.outboundMode === 2" >
              <el-input v-model="item.receiverAddress"  type="textarea" :disabled="!operateVisible"/>
           </el-descriptions-item>


            <el-descriptions-item label="入库人">
              {{ item.checkInPerson }}</el-descriptions-item
            >

            <template v-if="item.status > 4">
              <el-descriptions-item label="出库时间">{{
                item.checkOutTime
              }}</el-descriptions-item>
              <el-descriptions-item label="出库人">
                {{ item.checkOutPerson }}
              </el-descriptions-item>
            </template>

            <template v-if="item.comeFrom != 1 && item.status === 4">
              <el-descriptions-item label="出库方式">
                <el-radio-group v-model="item.outboundMode">
                  <el-radio :label="1">自提</el-radio>
                  <el-radio :label="2">物流</el-radio>
                </el-radio-group>
              </el-descriptions-item>

              <template v-if="item.outboundMode === 2">
                <el-descriptions-item label="预约时间">
                  <el-date-picker
                    v-model="item.appointmentTime"
                    :picker-options="pickerOptions"
                    forMat="yyyy-MM-dd HH"
                    type="datetime"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-descriptions-item>

                <el-descriptions-item label="物流渠道">
                  <el-select v-model="item.wlType" placeholder="请选择物流渠道">
                    <el-option
                      v-for="item in logisticsCompanyList"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-descriptions-item>
              </template>
            </template>
          </el-descriptions>
        </div>

        <div style="display: flex; justify-content: left; margin-top: 30px">
          <el-button
            style="width: 120px"
            type="primary"
            @click="submit"
            v-if="operateVisible"
            :loading="submitLoading"
            >确认</el-button
          >
          <el-button style="width: 120px" @click="cancel">关闭</el-button>
        </div>
      </div>
    </template>

    <el-dialog
      custom-class="order-create-dialog"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
      style="z-index: 2013"
      append-to-body
      width="500px"
    >
      <div style="text-align: center">
        <div>
          <i style="color: #67c23a; font-size: 50px" class="el-icon-success" />
        </div>
        <h1>出库提交成功</h1>
      </div>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="continuedOutStorage"
          >继续出库</el-button
        >
        <el-button type="primary" @click="printStockOut">打印出库单</el-button>
        <el-button
          type="primary"
          @click="printTransport"
          :loading="printTransportLoading"
          v-if="outOrderWayBillCode"
          >打印面单</el-button
        >
        <el-button @click="closeSuccessDialog">关闭</el-button>
      </div>
    </el-dialog>

    <PrintOutStrage
      id="print-out-strage-detail"
      :shopListMap="shopListMap"
      :productListMap="productListMap"
      :printOutStrageData="printOutStrageData"
      ref="printOutStragePage"
    />

    <PrintTransport
      ref="printTransport"
      :wayBillCodes="wayBillCodes"
      @success="printTransportLoading = false"
    />
  </el-drawer>
</template>

<script>
import {
  orderComeFromMap,
  washTypeList,
  IMAGE_OSS_URL,
  shoeStatusMap,
  logisticsCompanyList,
} from "@/config/index";
import TableTongji  from "../inStorage/components/TableTongji.vue";
import {
  getOrderDetail,
  orderOutStorage,
  orderOutStorageOnline,
} from "@/api/order/index";
import PrintOutStrage from "@/components/PrintOutStrage/PrintOutStrage";
import PrintTransport from "@/components/PrintTransport/PrintTransport.vue";
import { getNextHour } from "@/utils/tool";
export default {
  props: ["drawerVisible", "detailIds", "productListMap", "shopListMap"],
  components: {
    PrintOutStrage,
    PrintTransport,
    TableTongji
  },
  data() {
    return {
      detail: false,
      loading: false,
      submitLoading: false,
      printTransportLoading: false,
      dialogVisible: false,
      printOutStrageData: [],
      shoeStatusMap,
      logisticsCompanyList,
      washTypeList,
      orderComeFromMap,
      outOrderWayBillCode: null,
      wayBillCodes: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now();
        },
        selectableRange: `09:00:00 - 18:00:00`,
      },
    };
  },
  watch: {
    drawerVisible(val) {
      if (val === false) {
        this.detail = false;
        this.dialogVisible = false;
        this.outOrderWayBillCode = null;
        this.wayBillCodes = null;
        this.printOutStrageData = [];
      } else {
        this.getDetail();
      }
    },
  },
  methods: {
    async getDetail() {
      this.loading = true;
      try {
        const requestList = this.detailIds.map((id) => {
          return getOrderDetail(id);
        });
        const request = await Promise.all(requestList);
        this.printOutStrageData = this.detail = request.map((item) => {
          item.data.shoePoList.forEach((item) => {
            item.picture = item.picture
              ? item.picture.split(",").map((key) => {
                  return {
                    url: IMAGE_OSS_URL + key,
                  };
                })
              : [];
          });
          item.data.outboundMode = 2;
          item.data.wlType = "1";
          item.data.appointmentTime = getNextHour();
          item.data.fittingImgList = item.data.fittingImg
            ? item.data.fittingImg.split(",").map((key) => {
                return IMAGE_OSS_URL + key;
              })
            : [];

          return item.data;
        });
        this.loading = false;
        this.operateVisible =
          this.detail.filter((item) => {
            return item.status === 4;
          }).length > 0;
      } catch (err) {
        this.loading = false;
        this.printOutStrageData = [];
        this.$emit("close");
      }
    },
    submit() {
      // 线下
      const offlineIds = this.detail
        .filter((item) => {
          return (
            (item.status === 4 && item.comeFrom === "1") ||
            item.outboundMode === 1
          );
        })
        .map((item) => item.id);
      // 线上
      const onlineParams = this.detail
        .filter((item) => {
          return (
            item.status === 4 &&
            item.comeFrom !== "1" &&
            item.outboundMode === 2
          );
        })
        .map((item) => {
          return {
            orderDate: item.appointmentTime
              ? item.appointmentTime.getTime()
              : null,
            time: item.appointmentTime,
            orderId: item.id,
            wlType: item.wlType,
            receiverAddress:item.receiverAddress
          };
        });
      const isValidateOnlineParams = onlineParams.every((item) => {
        return item.orderDate && item.wlType && item.orderId && item.receiverAddress;
      });
      // console.info("onlineParams",onlineParams)
      if (!isValidateOnlineParams) {
        this.$message.error("请填写完整信息");
        return;
      }
      const isValiDateParams = onlineParams.every((item) => {
        return item.time && item.time.getTime() > Date.now();
      });
      if (!isValiDateParams) {
        this.$message.error("预约时间不能小于当前时间");
        return;
      }
      this.submitLoading = true;
      const promiseList = [];
      if (offlineIds.length) {
        // console.info("线下接口",offlineIds)
        promiseList.push(orderOutStorage(offlineIds));
      }
      if (onlineParams.length) {
        // console.info("线上接口",onlineParams)
        promiseList.push(
          orderOutStorageOnline(onlineParams).then((res) => {
            this.outOrderWayBillCode = res.data;
            this.$nextTick(() => {
              this.printTransport();
            });
          })
        );
      }
      Promise.all(promiseList)
        .then(() => {
          this.dialogVisible = true;
          this.$message.success("出库成功");
        })
        .catch((error) => {
          // console.log(error, "xzcasd");
        })
        .finally(() => {
          this.submitLoading = false;
        });
    },
    printStockOut() {
      this.$refs.printOutStragePage.$refs.printBtn.click();
    },
    cancel() {
      if (this.drawerVisible) {
        this.$emit("close");
      }
    },

    closeSuccessDialog() {
      this.dialogVisible = false;
      this.$emit("close");
    },
    continuedOutStorage() {
      this.closeSuccessDialog();
      this.$emit("goAhead");
    },

    printTransport() {
      this.printTransportLoading = true;
      this.wayBillCodes = [... this.outOrderWayBillCode];
    },
  },
};
</script>

<style lang="scss" scoped>
.order-list {
  .order-item {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.order-create-dialog {
  .el-dialog__header {
    padding: 0;
  }
}

::v-deep .hide-label{
    display: none !important;
}
</style>
